<script setup lang="ts">
//数据请求
import {getBannerListFn,getNavList,getproListFn} from '@/api/home'
// 组合式api数据响应
import {onMounted,ref,onDeactivated,onActivated} from 'vue'
// vant插件
import { Swipe, SwipeItem,Card,Col, Row,BackTop,PullRefresh,List } from 'vant';
// 数据响应类型
import type {Ref} from 'vue'
//定义类型
import type {iBanner,iPro,iGrid} from '@/type/home'
// 路由跳转
import { useRouter } from 'vue-router'
//全局状态
import { useUserstore } from '@/stores/user';
//自定义组件做商品列表菜单
import proListCom from '@/components/proList.vue'

const user=useUserstore()
const picList:Ref<iBanner[]>=ref([])
const navIcon:iGrid[]=getNavList()
const proList:Ref<iPro[]>=ref([])
// const collapse=ref(false)
const router=useRouter()


onMounted(()=>{
  //获取轮播图列表
    getBannerListFn().then(res=>{
      if(res.data.code==200){
        // console.log(res);
        
      picList.value=res.data.data
      }
    })


  //获取商品列表
    getproListFn({
      count:1,
      limitNum:10
    }).then(res=>{
      if(res.data.code==200){
        proList.value=res.data.data
      }
    })
  })
// 改变商品显示模式
// function changeCollapse(){
//   collapse.value=!collapse.value
// }

// 登录按钮点击
function loginClick(){
  router.push('/login')
}

// <!------------------ 上拉加载更多 --------------------->
    //默认开始在第一页，第一次加载就是第二页
    const count=ref(2)

    //是否正在加载
    const loading=ref(false)

    //是否有更多数据
    const finished=ref(false)

    //上拉时的回调函数，可以在这里发送数据请求
    function onLoad(){
        //标记正在加载中
        loading.value=true,
        getproListFn({
          count:count.value,
          limitNum:10
          }).then(res=>{
          //加载结束
          loading.value=false          

          //结束加载
          if(res.data.data.length<1){
            //没有数据了
            finished.value=true
          }else{
            //请求成功后下一次请求为页数加1
            count.value++

            // 将下一页数据放在原数据后面
            proList.value=[...proList.value, ...res.data.data]
          }     
      })
    }

// <!------------------ 上拉加载更多 --------------------->


// <!------------------ 点击回到顶部 --------------------->
const top=ref(0)

// 在组合式api中使用 ref 来标记标签
//contentRef 必须和设置的标记名相同
const contentRef:any=ref(null)


function scrollTop(e:any){
  top.value=e.target.scrollTop
}

function goTop(){
  contentRef.value.scrollTop=0
  
}

// <!------------------ 点击回到顶部 --------------------->


// <!------------------ 下拉刷新 --------------------->

const isLoading=ref(false)


function onRefresh(){
  isLoading.value=true
  //获取轮播图列表
  getBannerListFn().then(res=>{
      if(res.data.code==200){
        // console.log(111);
      picList.value=res.data.data
      }
    })

  //获取商品列表
    getproListFn({
      count:1,
      limitNum:10
    }).then(res=>{
      if(res.data.code==200){
        proList.value=res.data.data
      }


    })
    finished.value=false
    count.value=2
    isLoading.value=false
}

// <!------------------ 下拉刷新 --------------------->


// <!------------------ 缓存滚动距离 --------------------->


/*
  1、首页添加 keep-alive 缓存当前组件
  2、在离开页面时，记录当前滚动距离
  3、在进入页面时，回到离开时滚动距离
  4、将当前页面滚动距离修改
  5、清除缓存
 */

 //组件被移出的时候执行
 onDeactivated(()=>{
  //记录滚动距离
  localStorage.setItem("top",String(top.value))
 })

 //当组件进入时执行
 onActivated(()=>{
  //获取记录的滚动距离
  top.value=Number(localStorage.getItem('top')||0)

  //修改滚动距离
  contentRef.value.scrollTop=top.value
  //清除缓存的滚动距离
  localStorage.removeItem('top')
 })

// <!------------------ 缓存滚动距离 --------------------->
</script>

<template>
<main class="box">
  <!-- 头部 -->
    <header class="header">
      <slot name="header-left"></slot>
      主页
      <!-- 登录按钮 -->
      <van-button v-if="!user.loginState" @click="loginClick" class="header-right" size="small" plain type="primary">登录</van-button>
    </header>

   

    <!-- 内容 -->
    <!-- 这里用 ref 标记了 content ，使用的是ref函数不能加冒号：  -->
    <div class="content" @scroll="scrollTop" ref="contentRef">,
      <!-- 轮播图 -->

      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">

      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="item in picList" :key="item.img">
          <img :src="item.img" style="height: 2.5rem;width: 100%;" />
        </van-swipe-item>
      </van-swipe>
      
      <!-- nav -->
      <nav>
        <van-grid :column-num="5">
          <van-grid-item v-for="item in navIcon" :key="item.imgurl" :icon="item.imgurl" :text="item.title" />
        </van-grid>
      </nav>
     
          <!-- 商品渲染 -->
        <!-- <div class="pro">
          <van-card  v-for="item in proList" :key="item.desc"item.discount
            :price="(item.originprice*item.discount/10).toFixed(2)"
            :title="item.proname"
            :thumb="item.img1" 
            :origin-price="item.originprice"
          /> -->

         
          <!------------------ 上拉加载更多 --------------------->

          <van-list  v-model:loading="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
             <!-- 使用自定义组件，并父传子 -->
            <proListCom :proList="proList"/>

          </van-list>

          <!------------------ 上拉加载更多 --------------------->
          

          <!-- 下拉刷新 -->
        </van-pull-refresh>
          <!-- 下拉刷新 -->

          <!------------------ 回到顶部 --------------------->

          <div  v-show="top>500" @click="goTop" class="backTop">
            <van-icon size="35" name="back-top" />
          </div>

          <!------------------ 回到顶部 --------------------->

    </div>



  </main>

</template>
<style scoped lang="scss">
.header{
  position: relative;
  .header-right{
    position: absolute;
    right: 10px;
    top:6px
  }
}

.backTop{
  padding: 5px;
  box-sizing: border-box;
  position: fixed;
  right:20px;
  bottom: 120px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #f66;
}

// .van-swipe-item{
//   height: 2.5rem;
//   background-color: #39a9ed;
// }


// .van-card{
//       margin: 0.1rem 0; 
//       border-bottom: 1px solid #a0a0a0;
//       margin:0;
//     }
//     .van-card__content{
//       justify-content: space-around !important;
//     }

// .van-button{
//   position: fixed;
//   right:7vw; 
//   bottom:10vh;
// }


</style>

